<template>
    <div>
      <Steps :current="currentStep">
        <Step title="模版下载"></Step>
        <Step title="Excel导入"></Step>
        <Step title="导入完成"></Step>
      </Steps>
      <Divider dashed />
      <div :style="{ 'text-align': 'right' }">
        <Button
          type="primary"
          @click="currentStep--"
          v-if="currentStep > 0"
          class="mr-3"
          >上一步</Button
        >
        <Button
          type="primary"
          @click="currentStep++"
          v-if="currentStep < 2"
          class="mr-3"
          >下一步</Button
        >
        <Button type="primary" @click="imporExcelData" v-if="currentStep == 2"
          >导入</Button
        >
      </div>
  
      <div :style="{ 'text-align': 'center' }" v-if="currentStep == 0">
        <Button
          type="dashed"
          size="large"
          :style="{ 'margin-top': '40px', 'margin-bottom': '40px' }"
        >
          <a
            :href="VIRTUAL_PATH + '/static/excel/教师导入.xlsx'"
            download
            target="_blank"
            >点击下载Excel导入模版</a
          >
        </Button>
        <Alert class="tip_msg">
          <template slot="desc">
            表单填写说明：
            <br />1、姓名，工号不能为空
            <br />2、工号为唯一，不可以重复。第三方平台导入数据，工号为唯一对应字段
            <br />3、篇幅原因,列表中显示列可能少于模板
            <br />4、xlsx所有单元格，格式请设置为文本
          </template>
        </Alert>
      </div>
  
      <Upload
        type="drag"
        :action="uploadUrl"
        style="margin-top: 40px"
        v-if="currentStep == 1"
        :on-success="uploadExcelSuccess"
        accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :show-upload-list="false"
      >
        <div
          style="
            width: 100vw;
            height: 300px;
            text-align: center;
            vertical-align: middle;
            display: table-cell;
          "
        >
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>单击选择或将文件拖到此处(支持.xls .xlsx后缀名)</p>
        </div>
      </Upload>
  
      <div v-if="currentStep == 2" >
        <RadioGroup v-model="resultType" @on-change="resultchange">
          <Radio label="1">全部结果</Radio>
          <Radio label="2">导入成功</Radio>
          <Radio label="3">导入失败</Radio>
        </RadioGroup>
      </div>
  
      <Table
        style="margin-top: 40px"
        height="400"
        :columns="excelTablCol"
        :data="list"
        v-if="currentStep == 2"
        border
      >
        <template slot-scope="{ row }" slot="mark">
          <Tag
            v-if="row.mark.length > 0"
            :color="row.mark == '保存信息成功' ? 'success' : 'error'"
            >{{ row.mark }}</Tag
          >
        </template>
      </Table>
  
      <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
  </template>
  <script>
  import importStujs from "./index.js";
  
  export default importStujs;
  </script>
  